<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app-14">
       <ul>
           <li v-for="c in categories">
               <a :href="'query?cid=' + c.cid">{{c.cname}}</a>
           </li>
       </ul>

        <table class="table table-bordered">
            <tr>
                <th>学号</th>
                <th>照片</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <template v-for="(s, index) in stu">
                <tr :id="'tr' + s.stuNum">
                    <td>{{s.stuNum}}</td>
                    <td>
                        <img height="30" :src="s.stuImg" />
                    </td>
                    <td>{{s.stuName}}</td>
                    <td>
                        <!-- {{s.stuGender == 'M' ? '男' : '女'}} -->
                        <img v-if="s.stuGender == 'M'" src="img/m.bmp">
                        <img v-else src="img/f.bmp">
                    </td>
                    <td>{{s.stuAge}}</td>
                    <td>
                        <a class="btn btn-danger" :href="'stu/delete?cid=' + s.stuNum">删除</a>
                        <a class="btn btn-success" :href="'stu/update?cid=' + s.stuNum">修改</a>
                    </td>
                </tr>
            </template>

        </table>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#app-14',
            data: {
                categories:[
                    {
                        cid: 1,
                        cname: "华为"
                    },
                    {
                        cid: 2,
                        cname: "小米"
                    },
                    {
                        cid: 3,
                        cname: "OPPO"
                    },
                    {
                        cid: 4,
                        cname: "VIVO"
                    }
                ],
                stu: [
                    {
                        stuNum: "10010",
                        stuImg: "img/1.jpg",
                        stuName: "Tom",
                        stuGender: "M",
                        stuAge: 20
                    },
                    {
                        stuNum: "10011",
                        stuImg: "img/2.jpg",
                        stuName: "Joker",
                        stuGender: "M",
                        stuAge: 21
                    },
                    {
                        stuNum: "10012",
                        stuImg: "img/3.jpg",
                        stuName: "Ling",
                        stuGender: "F",
                        stuAge: 20
                    },
                    {
                        stuNum: "10013",
                        stuImg: "img/1.jpg",
                        stuName: "Jack",
                        stuGender: "F",
                        stuAge: 18
                    },
                ]
            }
        })
    </script>
</body>
</html>